<template>
  <!-- AGV控制页面 -->
  <div class="page-bench">
    <!-- AGV切换 -->

    <div class="large_box overflow-x-hidden">
      <!-- AGV属性 -->

      <div class="bench-box" v-for="(benchitem, benchkey) in this.benchlist">
        <!-- <template > -->

        <span class="move_title">{{ benchitem.name }}(当前位置)</span>
        <span class="now_position">
          <!-- {{ bench }} -->
          {{ bench_list[benchitem.key]["s"] }}
          {{ benchitem.Unit }}
        </span>
        <div class="post_position">
          <div class="post_position_input">
            <span>移动位置：</span>
            <el-input-number :placeholder="'范围[' + benchitem.PMin + ' -' + benchitem.PMax + ']'
              " :controls="false" v-model="bench_list[benchitem.key]['position']" :min="benchitem.PMin"
              :max="benchitem.PMax"></el-input-number>
          </div>
          <div class="post_position_input">
            <span>移动速度：</span>
            <el-input-number :placeholder="'范围[' + benchitem.VMin + ' -' + benchitem.VMax + ']'
              " :controls="false" v-model="bench_list[benchitem.key]['v']" :min="benchitem.VMin"
              :max="benchitem.VMax"></el-input-number>
          </div>
        </div>
        <div class="post_button">
          <el-button class="el-button-success stop" type="text" icon="el-icon-video-pause"
            @click="benchstop(benchitem.key)" style="display: flex; align-items: center">停止
          </el-button>
          <el-button class="el-button-stop" type="text" icon="el-icon-s-tools" @click="benchmove(benchitem.key)">移动
          </el-button>
        </div>
        <!-- </template> -->
      </div>
      <div class="bench-box">
        <!-- <template > -->

        <span class="move_title">转盘旋转</span>
        <span class='now_position' >
                    此导轨无当前位置
                </span>
        <div class="post_position">
          <div class="post_position_input">
            <span>移动位置</span>
            <el-input-number :controls="false" :min="0" :max="0" disabled="true"></el-input-number>
          </div>
          <div class="post_position_input">
            <span>移动速度：</span>
            <el-input-number placeholder="范围 0.1 - 240" :controls="false" v-model="speed_5" :min="0.1"
              :max="240"></el-input-number>
          </div>
        </div>
        <div class="post_button">
          <el-button class="el-button-success stop" type="text" icon="el-icon-video-pause" @click="benchstop(5)"
            style="display: flex; align-items: center">停止
          </el-button>
          <el-button class="el-button-stop" type="text" icon="el-icon-s-tools" @click="DeviceRotate(0)">正转
          </el-button>

          <el-button class="el-button-stop" type="text" icon="el-icon-s-tools" @click="DeviceRotate(1)">反转
          </el-button>
        </div>
        <!-- </template> -->
      </div>
    </div>
    <div class="foot">
      
      <el-button class="my_class_primary" type="primary" @click="armconnect()">
        机械臂连接
    </el-button>
            <el-button class="my_class_primary" type="primary" @click="SetJointMoveToSave()">
                机械臂安全位置
            </el-button>
            
        </div>

    

    <el-dialog v-loading="loading_angle" element-loading-text="正在计算灯光角度请稍等" title="计算灯光角度" id="callightangle"
      :visible.sync="is_autolightcalculate" width="30%" :before-close="handleClose">
      <el-form>
        <el-form-item label="选择灯光:" :label-width="formLabelWidth">
          <el-radio :label="0" v-model="Selectlight.id" style="font-size: 13px; color: white">天空散射光
          </el-radio>
          <el-radio :label="1" v-model="Selectlight.id" style="font-size: 13px; color: white">太阳点光源
          </el-radio>
        </el-form-item>
      </el-form>
      <el-form>
        <el-form-item label="亮度计导轨角度:" :label-width="formLabelWidth">
          <el-input v-model="Selectlight.angle" @keyup.native="autoangle"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="is_autolightcalculate = false">取 消</el-button>
        <el-button type="primary" @click="CalculatingAngle">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog v-loading="loading_DeviceReset" element-loading-text="正在复位请稍等" title="是否急停复位" id="restart"
      :visible.sync="is_DeviceReset" width="30%" :before-close="handleClose">
      <span style="font-size: 25px; color: red; margin-right: auto">是否急停复位</span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="is_DeviceReset = false">取 消</el-button>
        <el-button type="primary" @click="DeviceReset">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ajax } from "@/utils/ajax";

// 导入 agv 所有接口
import { agvApis } from "@/utils/apis";
import { time } from "echarts";

export default {
  data() {
    return {
      speed_5:10,
      bench_list:[
        { s: 0, v: "", position: "" },
        { s: 0, v: "", position: "" },
        { s: 0, v: "", position: "" },
        { s: 0, v: "", position: "" },
        { s: 0, v: "", position: "" },
        { s: 0, v: "", position: "" },
      ],
      benchlist: [
        {
          name: "主导轨前后",
          Unit: "mm",
          PMin: 0,
          PMax: 3000,
          key: 0,
          VMin: 0,
          VMax: 500,
        },
        {
          name: "抖动台上下",
          Unit: "mm",
          PMin: 935,
          PMax: 1190,
          key: 1,
          VMin: 0,
          VMax: 10,
        },
        {
          name: "左侧光源旋转",
          Unit: "°",
          PMin: 0,
          PMax: 360,
          key: 2,
          VMin: 10,
          VMax: 20,
        },
        {
          name: "右侧光源旋转",
          Unit: "°",
          PMin: 0,
          PMax: 360,
          key: 3,
          VMin: 10,
          VMax: 20,
        },
        {
          name: "转盘左右",
          Unit: "mm",
          PMin: 0,
          PMax: 2500,
          key: 4,
          VMin: 0,
          VMax: 3000,
        },
        // {name:'转盘旋转',Unit:'RPM',PMin:'0',PMax:'',key:'5',VMin:'',VMax:''}
      ],
      websocket: null, // WebSocket对象
      is_guide_move: "导轨处于停止状态",
      is_DeviceReset: false,
      loading_DeviceReset: false,
      loading_angle: false,
      is_autolightcalculate: false,
      url: "http://10.10.20.127:8000/media",
      cms_name: "",
      cmclocation: false,
      startstatus: -1,
      Selectlight: {
        id: 0,
        angle: "",
      },
      start_light: {
        lux: "",
        cct: "",
        eight: "",
        nine: "",
      },
      currentIndex: 0,
      chart: 0,
      baseUrl: this.$settings.BASE_URL_CMS + "media/img/",
      card: [],
      is_cardupdate: false,
      card_all: "",
      cardupdate: {
        card_name: "",
        sort: "",
        image_url: "",
        decription_id: "",
      },
      formLabelWidth: "120",
      imgUrl: "file://PP/test_photo/Camera/IMG_20211009_191419.jpg",
      bench: [
        { s: 0, v: 0, position: "" },
        { s: 0, v: "", position: "" },
        { s: 0, v: "", position: "" },
        { s: 0, v: "", position: "" },
        { s: 0, v: "", position: "" },
        { s: 0, v: "", position: "" },
      ],
      is_light: false,
      passowrd: "",
      light_open: true,
    };
  },
  created() {
    // 先获取小车列表
    this.setupWebSocket();
    this.getallinform();
    // this.GetCard()
    // this.Getbench()
  },
  beforeDestroy() {
    this.closeWebSocket(); // 在组件销毁前关闭WebSocket连接
  },

  watch: {},

  computed: {},
 
  methods: {
    setupWebSocket() {
      this.websocket = new WebSocket("ws://10.10.10.66:8000/socket/JiaLiangGuide/"); // 创建WebSocket连接
      this.websocket.onopen = this.onWebSocketOpen; // WebSocket连接打开时的处理函数
      this.websocket.onmessage = this.onWebSocketMessage; // 收到WebSocket消息时的处理函数
      this.websocket.onclose = this.onWebSocketClose; // WebSocket连接关闭时的处理函数
    },
    onWebSocketOpen() {
      console.log("链接成功");
    },
    onWebSocketMessage(event) {
      var message = event.data;
      var dictionary = JSON.parse(message);
      // console.log(
      //   "message",
      //   dictionary.message.index,
      //   dictionary.message.location
      // );
      this.bench_list[dictionary.message.index]["s"] = dictionary.message.location;
      // console.log(this.bench[dictionary.message.index]["s"]);
      // this.bench[dictionary.message.index]['position'] = dictionary.message.location

      // 在这里您可以根据消息的内容执行不同的操作，例如更新界面、触发事件等
    },

    closeWebSocket() {
      if (this.websocket) {
        this.websocket.close(); // 关闭WebSocket连接
      }
    },

    // 角度
    autoangle(event) {
      const value = event.target.value;
      // 只保留数字和小数点
      event.target.value = value.replace(/[^\d-.]/g, "");

      // 限制小数点后最多两位
      if (event.target.value.includes(".")) {
        const parts = event.target.value.split(".");
        parts[1] = parts[1] ? parts[1].slice(0, 2) : null;
        event.target.value = parts.join(".");
      }

      // 处理负数情况
      if (parseFloat(event.target.value) < -50) {
        event.target.value = "-50";
      }

      // 设置最大值
      if (parseFloat(event.target.value) > 50) {
        event.target.value = "50";
      }
    },
    validateInput0(event) {
      const value = event.target.value;
      // 只保留数字和小数点
      event.target.value = value.replace(/[^\d.]/g, "");

      // 限制小数点后最多两位
      if (event.target.value.includes(".")) {
        const parts = event.target.value.split(".");
        parts[1] = parts[1] ? parts[1].slice(0, 2) : null;
        event.target.value = parts.join(".");
      }

      // 处理负数情况
      if (parseFloat(event.target.value) < 0) {
        event.target.value = "610";
      }

      // 设置最大值
      if (parseFloat(event.target.value) > 10375) {
        event.target.value = "10375";
      }
    },
    validateInput3(event) {
      const value = event.target.value;
      // // 只保留数字和小数点
      // event.target.value = value.replace(/[^\d.]/g, '');

      // // 限制小数点后最多两位
      // if (event.target.value.includes('.')) {
      //     const parts = event.target.value.split('.');
      //     parts[1] = parts[1] ? parts[1].slice(0, 2) : null;
      //     event.target.value = parts.join('.');
      // }

      // 处理负数情况
      if (parseFloat(event.target.value) < -200) {
        event.target.value = "-200";
      }

      // 设置最大值
      if (parseFloat(event.target.value) > 200) {
        event.target.value = "200";
      }
    },
    validateInput55(event) {
      const value = event.target.value;
      // 只保留数字和小数点
      event.target.value = value.replace(/[^\d-.]/g, "");
      // 限制小数点后最多两位
      if (event.target.value.includes(".")) {
        const parts = event.target.value.split(".");
        parts[1] = parts[1] ? parts[1].slice(0, 2) : null;
        event.target.value = parts.join(".");
      }

      // 处理负数情况
      if (parseFloat(event.target.value) < -180) {
        event.target.value = "-180";
      }

      // 设置最大值
      if (parseFloat(event.target.value) > 180) {
        event.target.value = "180";
      }
    },
    validateInput5(event) {
      const value = event.target.value;
      // 只保留数字和小数点
      event.target.value = value.replace(/[^\d-.]/g, "");
      // 限制小数点后最多两位
      if (event.target.value.includes(".")) {
        const parts = event.target.value.split(".");
        parts[1] = parts[1] ? parts[1].slice(0, 2) : null;
        event.target.value = parts.join(".");
      }

      // 处理负数情况
      if (parseFloat(event.target.value) < -90) {
        event.target.value = "-90";
      }

      // 设置最大值
      if (parseFloat(event.target.value) > 90) {
        event.target.value = "90";
      }
    },
    validateInput4(event) {
      const value = event.target.value;
      // 只保留数字和小数点
      event.target.value = value.replace(/[^\d-.]/g, "");
      // 限制小数点后最多两位
      if (event.target.value.includes(".")) {
        const parts = event.target.value.split(".");
        parts[1] = parts[1] ? parts[1].slice(0, 2) : null;
        event.target.value = parts.join(".");
      }

      // 处理负数情况
      if (parseFloat(event.target.value) < -150) {
        event.target.value = "-150";
      }

      // 设置最大值
      if (parseFloat(event.target.value) > 150) {
        event.target.value = "150";
      }
    },
    
    validateInput7(event) {
      const value = event.target.value;
      // 只保留数字和小数点
      event.target.value = value.replace(/[^\d-.]/g, "");
      // 限制小数点后最多两位
      if (event.target.value.includes(".")) {
        const parts = event.target.value.split(".");
        parts[1] = parts[1] ? parts[1].slice(0, 2) : null;
        event.target.value = parts.join(".");
      }

      // 处理负数情况
      if (parseFloat(event.target.value) < -180) {
        event.target.value = "-180";
      }

      // 设置最大值
      if (parseFloat(event.target.value) > 180) {
        event.target.value = "180";
      }
    },
    validateInput13(event) {
      const value = event.target.value;
      // 只保留数字和小数点
      event.target.value = value.replace(/[^\d-.]/g, "");
      // 限制小数点后最多两位
      if (event.target.value.includes(".")) {
        const parts = event.target.value.split(".");
        parts[1] = parts[1] ? parts[1].slice(0, 2) : null;
        event.target.value = parts.join(".");
      }

      // 处理负数情况
      if (parseFloat(event.target.value) < -65) {
        event.target.value = "-65";
      }

      // 设置最大值
      if (parseFloat(event.target.value) > 65) {
        event.target.value = "65";
      }
    },
    validateInput14(event) {
      const value = event.target.value;
      // 只保留数字和小数点
      event.target.value = value.replace(/[^\d.]/g, "");
      // 限制小数点后最多两位
      if (event.target.value.includes(".")) {
        const parts = event.target.value.split(".");
        parts[1] = parts[1] ? parts[1].slice(0, 2) : null;
        event.target.value = parts.join(".");
      }

      // 处理负数情况
      if (parseFloat(event.target.value) < 0) {
        event.target.value = "0";
      }

      // 设置最大值
      if (parseFloat(event.target.value) > 600) {
        event.target.value = "600";
      }
    },
    validateInput9(event) {
      const value = event.target.value;
      // 只保留数字和小数点
      event.target.value = value.replace(/[^\d.]/g, "");
      // 限制小数点后最多两位
      if (event.target.value.includes(".")) {
        const parts = event.target.value.split(".");
        parts[1] = parts[1] ? parts[1].slice(0, 2) : null;
        event.target.value = parts.join(".");
      }

      // 处理负数情况
      if (parseFloat(event.target.value) < 0) {
        event.target.value = "0";
      }

      // 设置最大值
      if (parseFloat(event.target.value) > 220) {
        event.target.value = "220";
      }
    },
    validateInput10(event) {
      const value = event.target.value;
      // 只保留数字和小数点
      event.target.value = value.replace(/[^\d-.]/g, "");
      // 限制小数点后最多两位
      if (event.target.value.includes(".")) {
        const parts = event.target.value.split(".");
        parts[1] = parts[1] ? parts[1].slice(0, 2) : null;
        event.target.value = parts.join(".");
      }

      // 处理负数情况
      if (parseFloat(event.target.value) < -200) {
        event.target.value = "-200";
      }

      // 设置最大值
      if (parseFloat(event.target.value) > 200) {
        event.target.value = "200";
      }
    },
    validateInput11(event) {
      const value = event.target.value;
      // 只保留数字和小数点
      event.target.value = value.replace(/[^\d.]/g, "");
      // 限制小数点后最多两位
      if (event.target.value.includes(".")) {
        const parts = event.target.value.split(".");
        parts[1] = parts[1] ? parts[1].slice(0, 2) : null;
        event.target.value = parts.join(".");
      }

      // 处理负数情况
      if (parseFloat(event.target.value) < 0) {
        event.target.value = "0";
      }

      // 设置最大值
      if (parseFloat(event.target.value) > 1200) {
        event.target.value = "1200";
      }
    },
    validateInput12(event) {
      const value = event.target.value;
      // 只保留数字和小数点
      event.target.value = value.replace(/[^\d.]/g, "");
      // 限制小数点后最多两位
      if (event.target.value.includes(".")) {
        const parts = event.target.value.split(".");
        parts[1] = parts[1] ? parts[1].slice(0, 2) : null;
        event.target.value = parts.join(".");
      }

      // 处理负数情况
      if (parseFloat(event.target.value) < 0) {
        event.target.value = "0";
      }

      // 设置最大值
      if (parseFloat(event.target.value) > 1150) {
        event.target.value = "1150";
      }
    },
    validateInput8(event) {
      const value = event.target.value;
      // 只保留数字和小数点
      event.target.value = value.replace(/[^\d-.]/g, "");
      // 限制小数点后最多两位
      if (event.target.value.includes(".")) {
        const parts = event.target.value.split(".");
        parts[1] = parts[1] ? parts[1].slice(0, 2) : null;
        event.target.value = parts.join(".");
      }

      // 处理负数情况
      if (parseFloat(event.target.value) < -250) {
        event.target.value = "250";
      }

      // 设置最大值
      if (parseFloat(event.target.value) > 250) {
        event.target.value = "250";
      }
    },
    validateInput16(event) {
      const value = event.target.value;
      // 只保留数字和小数点
      event.target.value = value.replace(/[^\d-.]/g, "");
      // 限制小数点后最多两位
      if (event.target.value.includes(".")) {
        const parts = event.target.value.split(".");
        parts[1] = parts[1] ? parts[1].slice(0, 2) : null;
        event.target.value = parts.join(".");
      }

      // 处理负数情况
      if (parseFloat(event.target.value) < -50) {
        event.target.value = "-50";
      }

      // 设置最大值
      if (parseFloat(event.target.value) > 50) {
        event.target.value = "50";
      }
    },
    validateInput17(event) {
      const value = event.target.value;
      // 只保留数字和小数点
      event.target.value = value.replace(/[^\d.]/g, "");

      // 限制小数点后最多两位
      if (event.target.value.includes(".")) {
        const parts = event.target.value.split(".");
        parts[1] = parts[1] ? parts[1].slice(0, 2) : null;
        event.target.value = parts.join(".");
      }

      // 处理负数情况
      if (parseFloat(event.target.value) < 0) {
        event.target.value = "0";
      }

      // 设置最大值
      if (parseFloat(event.target.value) > 8500) {
        event.target.value = "8500";
      }
    },
    // open_light() {
    //     this.is_light = true
    // },
    // open_light_is() {
    //     this.$axios.get(this.$settings.BASE_URL_CMS + `cmsauto/is_light/?id=${this.passowrd}`).then((res) => {
    //         if (res.data.code == 100) {
    //             this.is_light = false
    //             this.light_open = true
    //             this.$message('开启成功');
    //         } else {
    //             this.is_light = true
    //             this.$message('密码错误');
    //         }
    //     })
    // },

    DeviceReset() {
      this.loading_DeviceReset = true;
      this.$axios
        .get(
          this.$settings.BASE_URL_CMS + "CMS-Control/main-guide/DeviceReset/"
        )
        .then((res) => {
          if (res.data.code == 100) {
            this.loading_DeviceReset = false;
            this.is_DeviceReset = false;
            this.$message(res.data.msg);
          } else {
            this.loading_DeviceReset = false;
            this.$message(res.data.msg);
          }
        });
    },
    
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },
    sleep(ms) {
      //sleep延迟方法2
      var unixtime_ms = new Date().getTime();
      while (new Date().getTime() < unixtime_ms + ms) { }
    },
    armconnect(){
      this.$axios
        .get(
          this.$settings.BASE_URL_CMS + "JiaLiang_Guide/arm/connect"
        ).then((res) => {
          if (res.data.code == 100) {
            
            this.$message({
                    message: '连接成功',
                    type: "success",
                  });
          }
          // alert(this.bench[0]['p'])
          else {
            this.$notify.error({ title: res.data.msg });
          }
          // alert(this.bench[0]['p'])
        });
    },
    SetJointMoveToSave(){
      this.$axios
        .get(
          this.$settings.BASE_URL_CMS + "JiaLiang_Guide/arm/SetJointMoveToSave"
        )
        .then((res) => {
          if (res.data.code == 100) {
            
            this.$message({
                    message: '移动成功',
                    type: "success",
                  });
          }
          // alert(this.bench[0]['p'])
          else {
            this.$notify.error({ title: res.data.msg });
          }
          // alert(this.bench[0]['p'])
        });
    },
    getallinform() {
      const cmsControlMainGuideGetCmsMainPosition =
        "JiaLiang_Guide/guide/GetCurrentPosition/";
      this.$axios
        .get(
          this.$settings.BASE_URL_CMS + cmsControlMainGuideGetCmsMainPosition
        )
        .then((res) => {
          if (res.data.code == 100) {
           
            this.bench_list = res.data.data;
           
          }
          // alert(this.bench[0]['p'])
          else {
            this.$notify.error({ title: res.data.msg });
          }
          // alert(this.bench[0]['p'])
        });
    },

    changebenchv(id) {
      // this.start_plc()
      this.sleep(10000);
      // if (this.startstatus == 0) {
      // alert('进入修改速度')
      this.$axios
        .get(
          this.$settings.BASE_URL_CMS +
          `cmsauto/alls/?id=${id}&v=${this.bench[id]["v"]}&s=${this.bench[id]["s"]}`
        )
        .then((res) => {
          if (res.data.code == 100) {
            this.$message({
              message: res.data.msg,
              type: "success",
            });
          } else {
            this.$message.error(res.data.msg);
          }
        });
      // this.sleep(3000)
      // }
      this.stop_plc();
    },

   

    async benchmove(id) {
      // console.log(this.bench_list[id]["v"],this.bench_list[id]["position"])
   
      // console.log(id_all[i]); //打印结果为books的索引
      // alert(id_all[i])
      console.log(this.bench[id]["v"]);
      this.is_guide_move = "导轨处于移动状态";
            this.$axios
              .post(
                this.$settings.BASE_URL_CMS +
                `JiaLiang_Guide/guide/GetMainPosition/`,
                {
                  axis: id,
                  position: parseFloat(this.bench_list[id]["position"]),
                  speed: parseFloat(this.bench_list[id]["v"]),

                }
              )
              .then((res) => {
                if (res.data.code == 100) {
                  this.$message({
                    message: res.data.msg,
                    type: "success",
                  });
                  this.is_guide_move = "导轨处于停止状态";
                  // this.bench = res.data.data;
                  // resolve();
                } else {
                  this.is_guide_move = "导轨处于停止状态";
                  this.$message.error(res.data.msg);
                  // this.bench = res.data.data;
                }
              });
       

      // this.sleep(3000)
      // })
      // this.stop_plc()
    },
    DeviceRotate(index){
      this.$axios
        .post(
          this.$settings.BASE_URL_CMS +
          `JiaLiang_Guide/guide/SetDeviceRotate/`,
          {
            rd: index,
            speed : parseFloat(this.speed_5),
          }
        )
        .then((res) => {
          if (res.data.code == 100) {
            this.$message({
              message: res.data.msg,
              type: "success",
            });
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    benchstop(id) {
      // this.start_plc()
      // this.sleep(3000)
      // if (this.startstatus == 0) {
      // console.log(id_all)
      // await new Promise((resolve, inject) => {
      this.$axios
        .post(
          this.$settings.BASE_URL_CMS +
          `JiaLiang_Guide/guide/StopGuide/`,
          {
            axis: id,
          }
        )
        .then((res) => {
          if (res.data.code == 100) {
            this.$message({
              message: res.data.msg,
              type: "success",
            });
          } else {
            this.$message.error(res.data.msg);
          }
        });
      // });
      // this.sleep(3000)

      //  this.stop_plc()
    },
  },
  // },
};
</script>

<style lang="less">
.stop {
  color: red;
}

.el-message-box {
  background-color: #161d26;
  border: #1f2935;
}

.page-bench {
  width: 100%;
  height: 100%;
  float: left;

  // line-height: @h*80vh;
  .overflow-x-hidden {
    overflow-x: hidden !important;
  }

  .large_box {
    float: left;
    height: 60%;
    width: 100%;
    overflow: auto;

    .bench-box {
      width: @w * 395vw;
      float: left;
      height: @h*256vh;

      background: #1f2935;
      margin: @h*20vh 0 0 @w * 18vw;
      border-radius: 0px 0px 0px 0px;

      .post_position {
        height: @h*70vh;
        margin: @h*15vh 0;
        width: @w * 392vw;

        .post_position_input {
          float: left;
          width: @w * 160vw;
          margin-left: @w * 20vw;
          height: @h*70vh;

          .el-input {
            float: left;
            width: @w * 165vw;
            height: @h*40vh;

            .el-input__inner {
              height: @h*40vh;
              padding: 0;
              font-size: @h*12vh;
              background: #161d26;
              text-align: center;
              border: none;
              color: #fff;
            }
          }

          span {
            float: left;
            width: @w * 140vw;
            height: @h*30vh;
            line-height: @h*30vh;
          }
        }
      }

      .move_title {
        width: @w * 370vw;
        margin-left: @w * 20vw;
        height: @h*60vh;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 500;
        font-size: @h*22vh;
        font-weight: 700;
        letter-spacing: @w * 1vw;
        color: #ffffff;
        line-height: @h*60vh;
        text-align: left;
        font-style: normal;
        text-transform: none;
        float: left;
      }

      .post_button {
        height: @h*47vh;
        // width: @w * 200vw;
        display: flex;
        justify-content: center;
        align-items: center;

        .el-button {
          float: left;
          margin: 0 @w * 20vw;
        }
      }

      .now_position {
        width: @w * 50vw;
        margin: @h*20vh @w * 20vw;
        height: @h*50vh;
        // line-height: @h*10vh;
        color: #00b42a;
        font-size: @h*40vh;

        .el-input__suffix {
          float: left;
          color: #00b42a;
          line-height: @h*70vh;
          margin-left: auto;
        }

        .el-input__inner {
          padding: 0;
          margin: 0;
          font-family: Source Han Sans, Source Han Sans;
          font-weight: 700;
          font-size: @h*30vh;
          color: #00b42a;
          // line-height: @h*20vh;
          text-align: left;
          font-style: normal;
          text-transform: none;
          float: left;
          background: none;
          border: none;
          display: flex;
          align-items: center;
          width: fit-content;
        }
      }
    }
  }

  .foot {
    // float: left;
    height: @h*60vh;
    width: @w * 1638vw;
    background-color: #1f2935;
    position: absolute;
    bottom: 0;
    right: @w * 25vw;

    .my_class {
      float: right;
      height: @h*40vh;
      width: auto;
      padding: 0 @w * 10vw;
      // background-color: #161D26;
      margin: @h*10vh 0 0 @w * 10vw;
      color: #fff;
    }

    .my_class_primary {
      float: right;
      height: @h*40vh;
      width: auto;
      padding: 0 @w * 10vw;
      // background-color: #161D26;
      margin: @h*10vh @w * 10vw 0 @w * 10vw;
      color: #fff;
    }
  }

  #callightangle {
    .el-dialog {
      background-color: #1f2935;
    }

    .el-radio__label {
      color: #fff;
    }

    .el-dialog__title {
      color: #fff;
    }

    .el-form-item__content {
      display: flex;

      .el-radio {
        margin-top: @h*15vh;
        margin-left: @w * 20vw;
      }

      .el-form-item__label {
        width: @w * 115vw;
      }

      .el-input {

        // padding: 0;
        .el-input__inner {
          background-color: #161d26;
          border: none;
          color: #fff;
        }
      }
    }
  }

  #restart {
    .el-dialog {
      background-color: #1f2935;
    }

    .el-radio__label {
      color: #fff;
    }

    .el-dialog__title {
      color: #fff;
    }

    .el-form-item__content {
      .el-input {

        // padding: 0;
        .el-input__inner {
          background-color: #161d26;
          border: none;
          color: #fff;
        }
      }
    }
  }

  #bench_save {
    .el-dialog {
      margin: 0 !important;
      top: 15%;
      left: 27%;
    }

    .el-dialog__body {
      background-color: #1f2935;
      padding: @h*10vh @w * 10vw;

      .savename {
        .el-form-item {
          display: flex;
          padding: @h*20vh @w * 20vw;
          margin: 0;

          // border-bottom:  1px solid #8291A9;
          .el-form-item__label {
            width: @w * 140vw;
            height: @h*50vh;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 400;
            font-size: @h*18vh;
            color: #ffffff;
            line-height: @h*50vh;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }

          .el-form-item__content {
            padding: 0;
            margin: 0;

            .el-input {
              width: @w * 300vw;
              height: @h*50vh;

              // padding: 0;
              .el-input__inner {
                background-color: #161d26;
                border: none;
                color: #fff;
                line-height: @h*50vh;
                height: @h*50vh;
              }
            }
          }
        }
      }

      .saveblist {
        background-color: #161d26;
        margin: 0 @w * 20vw;

        .el-form-item {
          display: -webkit-inline-box;
          margin: 0 @w * 20vw;

          .el-form-item__label {
            width: @w * 120vw;
            height: @h*50vh;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 400;
            font-size: @h*14vh;
            color: #ffffff;
            line-height: @h*50vh;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }

          .el-form-item__content {
            padding: 0;
            margin: 0;

            .el-input {
              width: @w * 110vw;
              // height: @h*30vh;

              // padding: 0;
              .el-input__inner {
                background-color: #161d26;
                border: none;
                color: #00b42a;
                // line-height: @h*30vh;
                height: @h*30vh;
              }
            }
          }
        }
      }
    }

    .el-dialog__footer {
      background-color: #1f2935;
    }

    .el-dialog__header {
      border-bottom: 1px solid #8291a9;
      padding: 0 @w * 20vw;
      height: @h*54vh;
      background: #1f2935;

      .el-dialog__headerbtn {
        position: absolute;
        top: @w * 15vw;
        right: @h*15vh;
      }

      .el-dialog__title {
        line-height: @h*50vh;
        height: @h*54vh;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 500;
        font-size: @h*16vh;
        color: #ffffff;
        // line-height: 24px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }
  }
}
</style>
